<template>
  <div>
    <el-card shadow="hover" @click="menu_visible=true" style="height:100px">
      <div align="center">
        <i class="el-icon-menu" style="font-size:50px;color:#E6A23C"></i>
        <p>菜单管理</p>
      </div>
    </el-card>
    <el-dialog v-model="menu_visible" width="80%">
      <template #title>
        <span>菜单管理</span>
        <el-button size="mini" type="success" @click="init_json()" style="float:right;margin-right:20px">导出json</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="add_menu_status=true"
          style="float:right;margin-right:0px"
        >添加</el-button>
      </template>
      <div id="menu">
        <el-menu default-active="1" background-color="#fff" style="border-right:0px;color:#000">
          <el-checkbox-group v-model="checkList" @change="get_out_menu">
            <el-submenu v-for="(menu,index) in menu_data" :key="index" :index="''+index">
              <template #title>
                <el-checkbox :label="index+1"></el-checkbox>
                <i :class="menu.menu_icon" style="color:#606266"></i>
                <span style="color:#606266">{{menu.menu_name}}</span>
                <div style="float:right;margin-right:20px">
                  <el-tag
                    :type="menu.menu_show_status==1?'success':'danger'"
                  >{{menu.menu_show_status==1?'显示':'不显示'}}</el-tag>
                  <i
                    class="el-icon-top"
                    id="icon"
                    @click="menu_site_change('menu_up',index)"
                    style="color:#409EFF"
                  ></i>
                  <i
                    class="el-icon-bottom"
                    id="icon"
                    @click="menu_site_change('menu_down',index)"
                    style="color:#67C23A"
                  ></i>
                  <i
                    class="el-icon-edit-outline"
                    id="icon"
                    @click="edit_menu(index)"
                    style="color:#E6A23C"
                  ></i>
                  <i
                    class="el-icon-plus"
                    id="icon"
                    @click="add_menu_item(index)"
                    style="color:#409EFF"
                  ></i>
                  <i
                    class="el-icon-delete"
                    id="icon"
                    @click="delete_menu(index)"
                    style="color:#F56C6C"
                  ></i>
                </div>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="(item,i) in menu.children" :key="i" :index="item.path">
                  <div>
                    <span style="color:#606266">
                      <i :class="item.menu_icon" style="color:#606266"></i>
                      {{item.menu_name}}
                    </span>
                    <div style="float:right;margin-right:20px">
                      <el-tag
                        :type="item.menu_show_status==1?'success':'danger'"
                      >{{item.menu_show_status==1?'显示':'不显示'}}</el-tag>
                      <el-tag
                        :type="item.menu_vist_status==1?'success':'danger'"
                        style="margin-left:15px"
                      >{{item.menu_vist_status==1?'允许访问':'禁止访问'}}</el-tag>
                      <i
                        class="el-icon-arrow-up"
                        id="icon"
                        @click="menu_site_change('menu_item_up',index,i)"
                        style="color:#409EFF"
                      ></i>
                      <i
                        class="el-icon-arrow-down"
                        id="icon"
                        @click="menu_site_change('menu_item_down',index,i)"
                        style="color:#67C23A"
                      ></i>
                      <i
                        class="el-icon-edit"
                        id="icon"
                        @click="edit_item_menu(index,i)"
                        style="color:#E6A23C"
                      ></i>
                      <i
                        class="el-icon-delete"
                        id="icon"
                        @click="delete_menu_item(index)"
                        style="color:#F56C6C"
                      ></i>
                    </div>
                  </div>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-checkbox-group>
        </el-menu>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" @click="menu_visible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="save_menu">保存</el-button>
        </span>
      </template>
      <Addmenu v-model="add_menu_status" :add_data="add_menu_status"></Addmenu>
      <Menuedit v-model="edit_menu_data.status" :data="edit_menu_data"></Menuedit>
      <Menuitemedit v-model="edit_item_menu_data.status" :data="edit_item_menu_data"></Menuitemedit>
      <Addmenuitem v-model="add_item_menu.status" :data="add_item_menu"></Addmenuitem>
    </el-dialog>
  </div>
</template>
<script>
import Addmenu from "./menu_admin_sub/Addmenu.vue";
import Menuedit from "./menu_admin_sub/Menuedit.vue";
import Menuitemedit from "./menu_admin_sub/Menuitemedit.vue";
import Addmenuitem from "./menu_admin_sub/Addmenuitem.vue";
export default {
  components: {
    Addmenu,
    Menuedit,
    Menuitemedit,
    Addmenuitem
  },
  data() {
    return {
      checkList: [],
      menu_visible: false,
      add_menu_status: false,
      edit_menu_data: {
        status: false,
        index: ""
      },
      edit_item_menu_data: {
        status: false,
        index: ""
      },
      add_item_menu: {
        status: false,
        index: ""
      },
      menu_data: JSON.parse(sessionStorage.getItem("menu_data")),
      out_menu_data: []
    };
  },
  methods: {
    edit_menu(index) {
      this.edit_menu_data = {
        status: true,
        index: index
      };
    },
    add_menu_item(index) {
      this.add_item_menu = {
        status: true,
        index: index
      };
    },
    edit_item_menu(index, i) {
      this.edit_item_menu_data = {
        status: true,
        index: { index, i }
      };
    },
    get_out_menu(data) {
      this.out_menu_data = [];
      for (let index = 0; index < data.length; index++) {
        this.out_menu_data.splice(
          this.out_menu_data.length,
          0,
          this.menu_data[data[index] - 1]
        );
      }
      // console.log(this.out_menu_data);
    },
    delete_menu(index) {
      this.menu_data.splice(index, 1);
      this.save_menu();
    },
    delete_menu_item(index, i) {
      this.menu_data[index].children.splice(i, 1);
      this.save_menu();
    },
    save_menu() {
      sessionStorage.setItem("menu_data", JSON.stringify(this.menu_data));
      this.$router.go(0);
    },
    init_json() {
      if (this.out_menu_data.length > 0) {
        this.$message.success("生成json成功，请查看console控制台");
        console.log(JSON.stringify(this.out_menu_data));
      } else {
        this.$message.warning("请先选择要导出的菜单");
      }
    },
    menu_site_change(key, index, i) {
      const menu = this.menu_data;
      const menu_item_data = this.menu_data[index].children;
      const item_data = this.menu_data[index].children;
      switch (key) {
        case "menu_up":
          if (index != 0) {
            menu[index] = menu.splice(index - 1, 1, menu[index])[0];
          } else {
            menu.push(menu.shift());
          }
          break;
        case "menu_down":
          if (index != menu.length - 1) {
            menu[index] = menu.splice(index + 1, 1, menu[index])[0];
          } else {
            menu.unshift(menu.splice(index, 1)[0]);
          }
          break;
        case "menu_item_up":
          if (i != 0) {
            menu_item_data[i] = menu_item_data.splice(
              i - 1,
              1,
              menu_item_data[i]
            )[0];
          } else {
            menu_item_data.push(menu_item_data.shift());
          }
          break;
        case "menu_item_down":
          if (i != item_data.length - 1) {
            item_data[i] = item_data.splice(i + 1, 1, item_data[i])[0];
          } else {
            item_data.unshift(item_data.splice(i, 1)[0]);
          }
          break;
      }
    }
  },
  mounted() {
    //console.log(this.menu_data);
  }
};
</script>
<style scoped>
.el-card {
  cursor: pointer;
}
#menu {
  height: 50vh;
  overflow: auto;
}
#icon:hover {
  color: #ffffff;
  background-color: #409eff;
  border-radius: 100px;
}
</style>